<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			/**创建一个叫 smaller-img 的 CSS class，并用它来设置图片宽度为 100px。*/
			.smaller-img {
				width: 100px;
			}

			/*创建一个名为 thick-green-border 的 class， 该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框。 将这个 class 应用于你的猫图。*/
			.thick-green-border {
				border: 10px solid green;
			}

			.red-text {
				color: red;
			}

			h2 {
				font-family: Lobster, monospace;
			}

			p {
				font-size: 16px;
				font-family: monospace;
			}
		</style>

		<h2 class="red-text">CatPhotoApp</h2>
		<main>
			<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

			<a href="#"><img class="smaller-img thick-green-border" src="cat.jpg"
					alt="A cute orange cat lying on its back."></a>

			<div>
				<p>Things cats love:</p>
				<ul>
					<li>cat nip</li>
					<li>laser pointers</li>
					<li>lasagna</li>
				</ul>
				<p>Top 3 things cats hate:</p>
				<ol>
					<li>flea treatment</li>
					<li>thunder</li>
					<li>other cats</li>
				</ol>
			</div>

			<form action="https://freecatphotoapp.com/submit-cat-photo">
				<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
				<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
				<label><input type="checkbox" name="personality" checked> Loving</label>
				<label><input type="checkbox" name="personality"> Lazy</label>
				<label><input type="checkbox" name="personality"> Energetic</label><br>
				<input type="text" placeholder="cat photo URL" required>
				<button type="submit">Submit</button>
			</form>
		</main>
		</body>
</html>
